<template>
  <div class="image-upload-container">
    <div class="uploadImg">
      <el-upload 
        action="#" 
        :http-request="uploadImg" 
        class="upload-demo" 
        ref="upload" 
        :file-list="fileList"
        :on-success="uploadSuccess" 
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">开始上传</el-button>
        <div slot="tip" class="el-upload__tip">支持jpg/png格式，文件不超过500kb</div>
      </el-upload>
    </div>
    <div class="block">
      <div class="img-container" v-for="img in imgList" :key="img.id">
        <el-image 
          class="image" 
          :src="`http://localhost:9000/${img.name}`" 
          fit="cover"
          :style="{cursor: 'pointer'}"
          @click="openBigImage(`http://localhost:9000/${img.name}`)">
        </el-image>
        <el-button 
          class="delete-button" 
          type="danger" 
          icon="el-icon-delete"
          @click="delImg(img.id)">删除
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImageUpload',
  data() {
    return {
      imgList: [],
      fileList: []
    };
  },
  mounted() {
    this.getLunbo();
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    uploadImg(params) {
      const userinfo = JSON.parse(sessionStorage.getItem('user'));
      const fd = new FormData();
      fd.append('id', userinfo.id);
      fd.append('carousel', params.file);

      this.$http.post('carousel/backend/add', fd, {
        headers: {'Content-Type': 'multipart/form-data'}
      }).then(res => {
        if (res.data.code === 1) {
          this.$message.success(res.data.message);
          this.getLunbo();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    uploadSuccess(res, file, fileList) {
      // 可以在这里处理上传成功的逻辑，例如刷新图片列表
      this.getLunbo();
    },
    getLunbo() {
      this.$http.get('/carousel/list').then(res => {
        if (res.data.code === 1) {
          this.imgList = res.data.list;
        }
      });
    },
    delImg(imgId) {
      const userinfo = JSON.parse(sessionStorage.getItem('user'));
      this.$http.post('carousel/backend/remove', { id: userinfo.id, imgId: imgId }).then(res => {
        if (res.data.code === 1) {
          this.$message.success(res.data.message);
          this.getLunbo();
        } else {
          this.$message.error('操作失败');
        }
      });
    },
    // 可以添加一个方法来处理点击图片时的逻辑，例如打开一个模态框显示大图
    openBigImage(url) {
      console.log('Open big image:', url);
      // 实现打开大图的逻辑
    }
  }
};
</script>

<style scoped>
.image-upload-container {
  margin: 20px;
}

.uploadImg {
  margin-bottom: 20px;
  text-align: center;
}

.block {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}

.img-container {
  width: calc(20% - 20px);
  margin: 10px;
  position: relative;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 150px;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.image:hover {
  transform: scale(1.03);
}

.delete-button {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(255, 255, 255, 0.8);
}

.el-upload__tip {
  text-align: center;
  font-size: 12px;
  color: #606266;
}
</style>